<template>
<section>
<el-row class="title">
  <el-col :span="4" class="item1">彩票资讯</el-col>
  <el-col :span="4" class="item2" :offset="16" @click.native="goForward">更多资讯>></el-col>
</el-row>
  <el-row class="list">
    <el-col :span="12" class="item1">
      <div class="header flex">
          <span class="item1">今日热点</span>
          <span class="item2 single_ellipsis" @click="goDetail(hotNew1)">{{ hotNew1.title }}</span>
      </div>
      <div class="newsItem flex" v-for="item in paramsNews.leftNews">
        <span class="item1" style="display: inline-block; width: 48px;">[新闻]</span>
        <span class="item2 single_ellipsis" @click="goDetail(item)" >{{ item.title }}</span>
      </div>
    </el-col>
    <el-col :span="12" class="item2">
      <div class="header2 single_ellipsis" @click="goDetail(hotNew2)">{{ hotNew2.title }}</div>
      <div class="newsItem flex" v-for="item in paramsNews.rightNews">
        <span class="item1" style="display: inline-block; width: 48px;">[新闻]</span>
        <span class="item2 single_ellipsis" @click="goDetail(item)" >{{ item.title }}</span>
      </div>
    </el-col>
  </el-row>
  <img src="../../../../static/img/cai.gif" alt="">
</section>
</template>

<script>
	import newsDetail from '../detail/index.vue'
  export default {
    data () {
      return {
      	paramsNews: {
      		leftNews: [],
      		rightNews: []
      	},
      	hotNew1: '',
      	hotNew2: ''
      }
    },
    beforeMount() {
    	this.require_newsList()
    },
    methods: {
    	goForward() {
    		this.$router.push('/news/')
    	},
      goDetail (mes) {
        this.$router.push('/news/detail/' + mes.id)
      },
      require_newsList () {
      	this.$api.newsList().then(res => {
      		var list = res.data.list
      		for(let i = 0; i<list.length; i++) {
      			if(i == 0) {
      				this.hotNew1 = list[i]
      			}
      			if(i == 8) {
      				this.hotNew2 = list[i]
      			}
      			if(i < 8) {
      				this.paramsNews.leftNews.push(list[i])
      			} else if(i < 16) {
      				this.paramsNews.rightNews.push(list[i])
      			}
      		}
      	})
      }
    },
    components: {
    	'news-detail': newsDetail
    }

  }
</script>

<style lang="less" scoped>
  .title {
    height: 38px;
    line-height:38px;
    border-bottom: 1px solid #ccc;
    .item1 {
      font-size: 17px;
      font-weight: bold;
    }
    .item2:hover{
      color: red;
      cursor: pointer;
    }
  }
   .list{
     text-align: left;
     padding-left: 12px;
   }
  .header{
    height: 50px;
    line-height:50px;
    flex-wrap: nowrap;
    .item1 {
      font-size: 14px;
      font-weight: bold;
      margin-right: 10px;
      white-space: nowrap;
    }
    .item2{
      font-size: 16px;
      font-weight: bold;
      color: red;
      cursor: pointer;
    }
  }
  .header2{
    color: red;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    height: 50px;
    line-height:50px;
    padding:0 25px;
  }
  .newsItem{
    height: 25px;
    line-height:25px;
    .item1 {
      color: #aaa;
      font-size: 14px;
      margin-right: 12px;
    }
    .item2{
      font-size: 14px;
      color: black;
      cursor: pointer;
    }
    .item2:hover{
      color: red;
    }

  }

</style>
